<meta charset="UTF-8">
<div class="pd-10 system" id="edit-directive-type-wraper">
    <h3 class="h3-title" style="height: 32px;margin-bottom: 10px">编辑设备指令 <span style="float: right;"><i-button style="width: 100%" @click="back">返回</i-button></span> </h3>
    <div style="width: 700px;margin: 0 auto;">
        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;设备类型名称 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="devtypename" disabled="true"></i-input>
            </i-col>
        </Row>
        <Row>
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;指令Code : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim.number="dataInfo.cmdcode" disabled="true"></i-input>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;指令名称 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="dataInfo.cmdname"></i-input>
            </i-col>
        </Row>
        
        <Row>
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令描述 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="dataInfo.cmddescr"></i-input>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">
                参数 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="dataInfo.params" type="textarea" :rows="8" />
            </i-col>
        </Row>

        <Row style="margin: 10px 0" v-show="lock">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">预览 : &nbsp;</i-col>
            <i-col span="20">
                <Row style="margin: 5px 0" v-for="item in previewObjList" :key="item.text">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                        {{item.text}} : &nbsp;
                    </i-col>
                    <i-col span="16">
                        <i-input v-model.trim="kong"></i-input>    
                    </i-col>
                </Row>
            </i-col>
        </Row>
       
        <Row style="margin: 10px 0">
            <i-col span="10" :offset="8">
                    <i-button icon="md-add" @click="handleEditDirective" style="width: 100%">提交</i-button>
            </i-col>
        </Row>
    </div>
    <script>
       vueInstanse = new Vue({
            el:"#edit-directive-type-wraper",
            data:function(){
                return {               
                    previewObjList:[],
                    lock:false,
                    kong:"",
                    dataInfo:{},
                    devtypename:""
                }
            },
            watch:{
                dataInfo:function () { 
                    
                    if(this.dataInfo.params == ""){ this.lock = false; return ;}
                    this.previewObjList = [];
                    if(this.replaceAll(this.dataInfo.params) == ""){
                        this.lock = true;
                        var params = "<params>"+ this.dataInfo.params +"</params>";
                        var parser=new DOMParser(); 
                        var xmlDoc=parser.parseFromString(params,"text/xml"); 
                        this.parseXML(xmlDoc);
                    }else{
                        this.lock = false;                  
                    }
                }
            },
            methods: {
                back:function(){
                    var me = this;
                    var pagePath = null
                        if (utils.isLocalhost()) {
                            pagePath = myUrls.viewhost + 'view/systemparam/devicetype.html'
                        } else {
                            pagePath = '../view/systemparam/devicetype.html'
                        }   
                    me.$Loading.start();
                    $("#system-view").load(pagePath, function () {
                        me.$Loading.finish();
                    });
                },
                handleEditDirective:function(){
                    console.log(!this.cmdcode , !this.cmdname , !this.cmddescr , !this.lock);
              
                    var me = this;
                    var url = myUrls.updateDeviceTypeCmd();
                   
                    delete this.dataInfo.devtypename;

                    utils.sendAjax(url, this.dataInfo, function (resp) {
                        if (resp.status == 0) {
                            me.$Message.success("添加成功");
                        }else{
                            me.$Message.error(resp.cause);
                        };
                    });
                },
                replaceAll:function (str){
                    if(str!=null){
                        str = str.replace(/^<[\s\S]*>[\s\S]*<\/[\s\S]*>$/g,"")
                        return str;
                    }else{
                        return "suibian";
                    } 
                },
                parseXML:function(xmlDoc){
                    // <ha><param size="small" type="password">确认密码</param></ha>
                    var parent =  xmlDoc.children[0];
                    var children = parent.children;
                    for (var i = 0; i < children.length; i++) {
                        var item = children[i]
                        var text = item.innerHTML;
                        var type = item.getAttribute("type");
                        if (type && text) {
                            this.previewObjList.push({ type: type, text: text });
                        }
                    }
                },
                setValue:function(data){
                    this.dataInfo = data;
                    this.devtypename = data.devtypename;
                    if(this.dataInfo.params){
                        this.lock = true;  
                    };
                }
            },
            mounted : function (param) {  
                this.setValue(editObject);
            }
        })
    </script>
</div>